<template>
    <div class="infoGoods">
        <mynavbar></mynavbar>
        <!-- 轮播图 -->
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <img v-lazy="image" />
            </van-swipe-item>
        </van-swipe>
        <!-- 价格 -->
        <div class="price">
            <p class="price-top">
                <span>每日抄底 | </span>
                <span>
                    &nbsp;距离结束
                    <van-count-down :time="time" />
                </span>
            </p>
            <p class="price-bottom">
                ¥<span v-html="data.originprice"></span> ¥<span v-html="data.originprice * (data.discount / 10)"></span>
            </p>
        </div>

        <p v-html='data.proname' class="name"></p>
        <!-- <p v-html='data.desc' class="name"></p> -->


        <!-- 商品导航 -->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" dot />
            <van-goods-action-icon icon="cart-o" text="购物车" @click="onAddCartClicked" :badge="number" />
            <van-goods-action-icon icon="shop-o" text="店铺" />
            <van-goods-action-button type="warning" text="加入购物车" @click.stop="onAddCartClicked" />
            <van-goods-action-button type="danger" text="立即购买" @click="onBuyClicked" />
        </van-goods-action>
    </div>
</template>

<script>
import service from "../../../request/service";
import mynavbar from '../../yjj/item/mynavbar.vue'
export default {
    components:{
        mynavbar
    },
    data() {
        return {
            data: "",
            images: [],

            // 倒计时
            time: 2 * 50 * 60 * 1000,
            number:0,
        }
    },
    methods: {
        // 购买商品
        onBuyClicked() {
            this.$router.push("./buy");
        },
        // ,添加到购物车
        onAddCartClicked() {
            // this.$router.push({path:'./cart',query:{id:v}})
            // this.number = this.number+1
            if (sessionStorage.getItem("token")) {
                this.$router.push("/cart");
            } else {
                this.$router.push("/my");
            }
            service({
                url: `http://118.178.238.19:3001/api/cart/add`,
                method: "POST",
                data: {
                    token: sessionStorage.getItem("token"),
                    userid: sessionStorage.getItem("userid"),
                    proid: this.$route.query.id,
                },
            }).then((res) => {
                console.log(res);
            });
        },
        

    },
    mounted() {
        let url=''
        if(this.$route.query.from == 'search'){
           url=`http://121.89.205.189:3000/api/pro/detail/${this.$route.query.id}`
        }else{
            url =  `http://118.178.238.19:3001/api/pro/detail/${this.$route.query.id}`
        }
        service({
            url,
            method: "get",
        }).then((res) => {
            this.data = res.data.data;
            // this.images = res.data.data.banners
            this.images.push(res.data.data.img1);
            this.images.push(res.data.data.img2);
            this.images.push(res.data.data.img3);
            this.images.push(res.data.data.img4);
            console.log(res.data.data.proid);
        });
    },
};
</script>

<style scoped>
.infoGoods .van-swipe-item img{
    width:100%
}
.price {
    height: 4.5625rem;
    background: #ed3833;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 0.875rem;
}

.name {
    padding: 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.price-top {
    font-size: 0.6875rem;
    display: flex;
    align-items: center;
}

.price-top span:last-child {
    display: flex;
    align-items: center;
}

.price-top>>>.van-count-down {
    color: white;
}

.price-bottom span:first-child {
    font-size: 1.5625rem;
    font-weight: bolder;
}

.price-bottom span:last-child {
    font-size: 0.625rem;
    text-decoration: line-through;
    opacity: 0.9;
}
</style>